<?php

//include("verificarcuenta.php");
//include("global.php");

include("db/conexion.php");
include("db/cquery.php");

$query = new CQuery();

$imtv = $query->selectIMTV();

$ultima = $query->selectIMTV();
$ultima = mysql_fetch_array($ultima);

?>

<!DOCTYPE html PUBLIC "-//WC3//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
    <head>
    
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        
        <title>InfoMedia</title>
        <link rel="shortcut icon" href="images/favicon.png">
        <link rel="icon" href="images/favicon.png">
        <link rel="stylesheet" href="css/base.css">
        <script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
        
        <link rel="stylesheet" href="css/style.css">
        <link rel="stylesheet" href="css/jPages.css">
        <link rel="stylesheet" href="css/animate.css">
        <link rel="stylesheet" href="css/github.css">
        <script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
        <script type="text/javascript" src="js/highlight.pack.js"></script>
        <script type="text/javascript" src="js/tabifier.js"></script>
        <script src="js/js.js"></script>
        <script src="js/jPages.js"></script>
        <script type="text/javascript">
            var _gaq = _gaq || [];
            _gaq.push(['_setAccount', 'UA-28718218-1']);
            _gaq.push(['_trackPageview']);
            (function() {
                var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
                ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
                var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
            })();
        </script>
        
        <script>
        /* when document is ready */
        $(function(){
        /*
        * initiate the plugin without buttons and numeration
        * setting midRange to 15 to prevent the breaks "..."
        */
            $("div.holder").jPages({
                containerID : "itemContainer",
                first       : false,
                previous    : false,
                next        : false,
                last        : false,
                midRange    : 15,
                perPage     : 4,
                links       : "blank"
            });
        });
        </script>
        
		<style type="text/css">
          .holder {
            /*margin: 0 0;*/
			padding-top: 3px;
			padding-bottom: 3px;
            background-color: #464747;
          }
          .holder a {
			/*
			cursor: pointer;
            margin: 0 5px;
			padding: 4px;
            border-radius: 100%;
			*/
			margin: 0 5px;
			padding-top: 5px;
			padding-right: 10px;
			padding-bottom: 0px;
			padding-left: 10px;
			border-radius: 100%;
			background-image:url("images/boton.png");
		
			
          }
		  
          .holder a:hover {
            /*background-color: #222;
            color: #fff;*/
			margin: 0 5px;
			padding-top: 5px;
			padding-right: 10px;
			padding-bottom: 0px;
			padding-left: 10px;
			border-radius: 100%;
			background-image:url("images/boton-green.png");
          }
		  
          .holder a.jp-previous { margin-right: 15px; }
          .holder a.jp-next { margin-left: 15px; }
          .holder a.jp-current, a.jp-current:hover {
            /*color: #FF4242;
            font-weight: bold;*/
			margin: 0 5px;
			padding-top: 5px;
			padding-right: 10px;
			padding-bottom: 0px;
			padding-left: 10px;
			border-radius: 100%;
			background-image:url("images/boton-green.png");
          }
		  
          .holder a.jp-disabled, a.jp-disabled:hover {
            color: #eee;
          }
          .holder a.jp-current, a.jp-current:hover,
          .holder a.jp-disabled, a.jp-disabled:hover {
            /*cursor: default;
            background-color: #FF4242;*/
          }
          .holder span { margin: 0 5px; }
    </style>
		
       
        
        <!-- Cambio de noticias en encabezado al click del botón -->
        <script type="text/javascript">
            var idx="1";
        
            function boton(id){
                
                switch(id){
                    case ("b1"):
                    
                        idx = 1;
                    
                        document.getElementById("b1").src="images/boton-green.png";
                        document.getElementById("b2").src="images/boton.png";
                        document.getElementById("b3").src="images/boton.png";
                        
                        $('#n1').fadeIn("10000");
                        $('#n2').fadeOut("10000");
                        $('#n3').fadeOut("10000");
                        
                        $('#n1').style.display="block";
                        $('#n2').style.display="none";
                        $('#n3').style.display="none";
                        break;
                    
                    case ("b2"):
                        
                        idx = 2;
                        
                        document.getElementById("b1").src="images/boton.png";
                        document.getElementById("b2").src="images/boton-green.png";
                        document.getElementById("b3").src="images/boton.png";
                        
                        $('#n1').fadeOut("10000");
                        $('#n2').fadeIn("10000");
                        $('#n3').fadeOut("10000");
                        
                        $('#n1').style.display="none";
                        $('#n2').style.display="block";
                        $('#n3').style.display="none";
                        break;
                    
                    case ("b3"):
                    
                        idx = 3;
                        
                        document.getElementById("b1").src="images/boton.png";
                        document.getElementById("b2").src="images/boton.png";
                        document.getElementById("b3").src="images/boton-green.png";
                        
                        $('#n1').fadeOut("10000");
                        $('#n2').fadeOut("10000");
                        $('#n3').fadeIn("10000");
                        
                        $('#n1').style.display="none";
                        $('#n2').style.display="none";
                        $('#n3').style.display="block";
                        break;
                }
            }
            
            function botonx(){
                
                switch (idx){
                    case (1):
                        idx = 2;
                        
                        document.getElementById("b1").src="images/boton.png";
                        document.getElementById("b2").src="images/boton-green.png";
                        document.getElementById("b3").src="images/boton.png";
                        
                        $('#n1').fadeOut("10000");
                        $('#n2').fadeIn("10000");
                        $('#n3').fadeOut("10000");
                        
                        $('#n1').style.display="none";
                        $('#n2').style.display="block";
                        $('#n3').style.display="none";
                        break;
                    
                    case (2):
                        idx = 3;
                        
                        document.getElementById("b1").src="images/boton.png";
                        document.getElementById("b2").src="images/boton.png";
                        document.getElementById("b3").src="images/boton-green.png";
                        
                        $('#n1').fadeOut("10000");
                        $('#n2').fadeOut("10000");
                        $('#n3').fadeIn("10000");
                        
                        $('#n1').style.display="none";
                        $('#n2').style.display="none";
                        $('#n3').style.display="block";
                        break;
                        
                    case (3):
                        idx = 1;
                        
                        document.getElementById("b1").src="images/boton-green.png";
                        document.getElementById("b2").src="images/boton.png";
                        document.getElementById("b3").src="images/boton.png";
                        
                        $('#n1').fadeIn("10000");
                        $('#n2').fadeOut("10000");
                        $('#n3').fadeOut("10000");
                        
                        $('#n1').style.display="block";
                        $('#n2').style.display="none";
                        $('#n3').style.display="none";
                        break;
                }
            }
        </script>
        <!-- Cambio de noticias en encabezado al click del botón -->
        
        <!-- Publicidad -->
        <script type="text/javascript">
            var x=1;
            function publicidad(){
                switch (x) { 
   	                case (1):
                        $('#publicidad1').fadeIn("10000");
                        $('#publicidad2').fadeOut("10000");
                        document.getElementById("publicidad1").style.display="block";
                        document.getElementById("publicidad2").style.display="none";
                        x=2; 
                        break
                    case (2):
                        $('#publicidad1').fadeOut("10000");
                        $('#publicidad2').fadeIn("10000");
                        document.getElementById("publicidad1").style.display="none";
                        document.getElementById("publicidad2").style.display="block";
                        x=1;
                        break
                }
            }
        </script>
        <!-- Publicidad -->
        
        <script type="text/javascript">
            $(document).ready(function() {
                timer1 = setInterval("publicidad()", 8000);
                timer2 = setInterval("botonx()", 5000);
                boton("b1");
            });
            
            function video(id){
                $("#right").load("video.php?id="+id);
            }
            
        </script>
        
    </head>
    <body>
    <div id="background" align="center">
        <div id="web">
            <div id="header">
                <?php include("header.php");?>
            </div>
            <div id="main-menu" style="position: absolute; z-index: 10;">
                <?php $menu = ""; include("menu.php"); ?>
            </div>
            <div id="content">
                <div id="content1" style="padding-top: 35px; height: 600px;" align="left">
                    <div id="left" style="position: absolute; " >
						<img src="images/imtv-header.png" width="320" id="Imagen_IMTV" />
					    <ul id="itemContainer" style="list-style-type: none; ">
                        <?php while($news = mysql_fetch_array($imtv)){?>
                            <li id="li" style="padding-top: 0px; padding-bottom: 15px; width: 310px;">
                                <div class="info" style="height: 80px; max-height: 75px; width: 310px;">
                                    <div style="display: block; botom: 0px; margin-left: 10px; margin-right: 10px;">
                                        <FONT size=3 ><a style="cursor: pointer;" onclick="video(<?php echo $news['id']; ?>)"><?php echo $news['nombre']; ?></a></FONT>
                                        <FONT size=2><p style="color: white;">Texto de ejemplo para ver como va a quedar en la descripcion del video.</p></FONT>
                                    </div> 
                                </div>
                                <div class="mas"><a style="cursor: pointer;" onclick="video(<?php echo $news['id']; ?>)"><img src="images/ver-mas.png"/></a></div>
                                <div class="clear"></div>
                            </li>
                        <?php } ?>
                        </ul>
						<!--<div class="holder"></div>-->
						
                    </div>
					
                    <div id="right" style="position: absolute; left: 380px;">
                        <?php
                            $web=str_replace('watch?v=', 'v/', $ultima['link']);
                            $ios=str_replace('watch?v=', 'embed/', $ultima['link']);
                            
                            if ((strpos($_SERVER['HTTP_USER_AGENT'], "lackBerry"))||(strpos($_SERVER['HTTP_USER_AGENT'], "Android"))){ ?>
                                <a href="<?php echo $ultima['linkbb'] ?>"><img src="<?php echo $ultima['imagebb'] ?>"/></a>
                    <?php }elseif((strpos($_SERVER['HTTP_USER_AGENT'], "iPhone"))){ ?>
                            <iframe src="<?php echo $ios; ?>" frameborder="0" width="550" height="470"></iframe>
                    <?php }else{ ?>
                            <iframe width="550" height="470" src="<?php echo $web; ?>"></iframe><br />
                    <?php } ?>
					</div>
					
					<div class="holder" style="margin-top: 500px"></div>
					
                    <div id="navegador" style="position: absolute;"></div>
                </div>
                <div id="content2" align="left" style="margin-top: -80px; margin-left: 0px;">
                    <!-- banners -->
                        <div style="position: absolute; margin-top: 5px; ">
                            <div id="publicidad1" style="display: block; margin-left: 30px;">
                                <a target="_blank" href="http://itunes.apple.com/mx/app/im-noticias/id550675097?mt=8" style="position: absolute; top: 0px;"><img width="900" src="../../images/nuevo banner app INFOMEDIA.png"/></a>
                            </div>
                            <div id="publicidad2" style="display: none; margin-left: 30px;">
                                <img width="900" src="../../images/banner_adda.png"/>
                            </div>
                            <div id="publicidad3" style="display: none; margin-left: 30px;">
                                <img width="900" src="../../images/banner_gaviota.png"/>
                            </div>
                            <div id="publicidad4" style="display: none; margin-left: 30px;">
                                <img width="900" src="../../images/banner_litek.png"/>
                            </div>
                        </div>
                        <!-- banners -->
                </div>
            </div>
            <div style="position: absolute; margin-top: 30px; width: 100%">
                <img src="images/footer.png" width="100%"/>
            </div>
        </div>
    </div>
    </body>
</html>